<template>
  <div
    class="app-container calendar-list-container"
    v-loading="loading"
    element-loading-text="正在导出数据"
  >
    <!-- filter 条件查询 -->
    <div class="filter-container">
      <el-form :inline="true" ref="form1" :model="listQuery">
        <el-form-item label="公司名称">
          <el-select
            v-model="listQuery.companyName"
            clearable
            placeholder="请选择"
            style="width: 240px;"
          >
            <el-option label="广州市赫能士智能科技有限公司" value="广州市赫能士智能科技有限公司"></el-option>
            <el-option label="深圳市高德威技术有限公司" value="深圳市高德威技术有限公司"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="客户编码">
          <el-input
            clearable
            v-model="listQuery.clientNumber"
            style="width: 180px;"
            placeholder="请输入客户编码"
          />
        </el-form-item>
        <el-form-item label="产品品号">
          <el-input
            clearable
            v-model="listQuery.produceNo"
            style="width: 180px;"
            placeholder="请输入产品品号"
          />
        </el-form-item>
        <el-form-item label="拟制人">
          <el-input
            clearable
            v-model="listQuery.createBy"
            style="width: 180px;"
            placeholder="请输入拟制人"
          />
        </el-form-item>
        <el-form-item label="文件编号">
          <el-input
            clearable
            v-model="listQuery.fileNo"
            style="width: 180px;"
            placeholder="请输入文件编号"
          />
        </el-form-item>
        <el-form-item label="型号描述">
          <el-input
            clearable
            v-model="listQuery.produceName"
            style="width: 180px;"
            placeholder="请输入型号描述关键字"
          />
        </el-form-item>
        <el-button
          class="filter-item"
          type="primary"
          v-waves
          icon="el-icon-search"
          @click="getData"
        >搜索</el-button>
        <el-button
          class="filter-item"
          type="primary"
          v-waves
          icon="el-icon-plus"
        >新增</el-button>
      </el-form>
    </div>

    <!-- table 表格 -->
    <div style="overflow-x: auto;">
      <el-table
        :data="tableInfo"
        v-loading="loadingList"
        element-loading-text="数据加载中..."
        max-height="700"
        stripe
        border
        highlight-current-row
        fit
        style=" min-width: 1500px;"
        class="fixed-table"
      >
        <el-table-column label="序号" type="index" align="center" width="80" show-overflow-tooltip />
        <el-table-column label="所属公司" prop="companyName" align="center" show-overflow-tooltip />
        <el-table-column label="文件编号" prop="fileNo" align="center" show-overflow-tooltip />
        <el-table-column label="状态" prop="status" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status==1" size="medium" type="success">正常</el-tag>
            <el-tag v-else-if="scope.row.status==2" size="medium" type="warning">审核</el-tag>
            <el-tag v-else-if="scope.row.status==3" size="medium" type="danger">编辑</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="客户编码" prop="clientNumber" align="center" show-overflow-tooltip />
        <el-table-column label="产品品号" prop="produceNo" align="center" show-overflow-tooltip />
        <el-table-column label="型号描述" prop="produceName" align="center" show-overflow-tooltip />
        <el-table-column label="当前版本" prop="version" align="center" show-overflow-tooltip />
        <el-table-column label="拟制人" prop="createName" align="center" show-overflow-tooltip />
        <el-table-column label="拟制时间" prop="createTime" align="center" show-overflow-tooltip />
        <el-table-column label="审核人" prop="reviewerName" align="center" show-overflow-tooltip />
        <el-table-column label="审核时间" prop="reviewerTime" align="center" show-overflow-tooltip />
        <el-table-column label="批准人" prop="approverName" align="center" show-overflow-tooltip />
        <el-table-column label="批准时间" prop="approverTime" align="center" show-overflow-tooltip />
        <el-table-column label="操作" align="center" width="500">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="view(scope.row)">查看</el-button>
            <el-button type="warning" size="mini" @click="view(scope.row)">修改</el-button>
            <el-button type="success" size="mini" @click="exportSopPdf(scope.row)">下载SOP</el-button>
            <el-button type="info" size="mini" @click="downMaterialBom(scope.row)">下载清单</el-button>
            <!-- 审批按钮：仅当当前用户是审核人或批准人时显示 -->
            <el-button
              v-if="scope.row.status === '2' && ((scope.row.reviewer === userInfo.jobNumber && !scope.row.reviewerTime) || (scope.row.approver === userInfo.jobNumber && !scope.row.approverTime))"
              type="danger"
              size="mini"
              @click="openDialog(scope.row)"
            >审批</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- pagination 分页 -->
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="listQuery.page"
        :page-sizes="[5,10,20,30,40,100,300,500]"
        :page-size="listQuery.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>

    <!-- 审批弹窗 -->
    <el-dialog
      title="提交审核"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form :model="form" :rules="rules" ref="formRef" label-width="80px">
        <el-form-item label="结果" prop="result">
          <el-select v-model="form.result" placeholder="请选择" style="width: 100%;">
            <el-option label="通过" value="1"></el-option>
            <el-option label="不通过" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入备注" />
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">提 交</el-button>
      </div>
    </el-dialog>

    <el-divider></el-divider>
  </div>
</template>

<script>
import {
  sopQueryPage,
  sopHandle,
  getSopMaterials,
  exportSopPdf
} from "@/api/processRoute";
export default {
  name: "inquireSOP",
  data() {
    return {
      dialogVisible: false,
      form: {},
      rules: {
        result: [{ required: true, message: "请选择结果", trigger: "blur" }]
      },
      userInfo: this.$store.state.user.userInfo,
      listQuery: {
        page: 1,
        limit: 10
      },
      total: 0,
      tableInfo: [],
      loadingList: false,
      loading: false
    };
  },
  methods: {
    async exportSopPdf(row) {
      const blob = await exportSopPdf(row.id);
      const url = window.URL.createObjectURL(blob);
      const link = document.createElement("a");
      link.href = url;
      link.download = row.clientNumber + ".pdf";
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      window.URL.revokeObjectURL(url);
    },
    async downMaterialBom(row) {
      const blob = await getSopMaterials(row.id);
      const url = window.URL.createObjectURL(blob);
      const link = document.createElement("a");
      link.href = url;
      link.download = row.clientNumber + "物流备料清单.xlsx";
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      window.URL.revokeObjectURL(url);
    },
    openDialog(row) {
      this.form = { ...row };
      this.dialogVisible = true;
    },
    handleClose(done) {
      this.$confirm("确认关闭？").then(() => done()).catch(() => {});
    },
    submit() {
      this.$refs.formRef.validate(valid => {
        if (valid) {
          this.dialogVisible = false;
          this.handle();
        }
      });
    },
    async handle() {
      if (!this.form.reviewerTime) {
        if (this.form.reviewer && this.form.reviewer != this.userInfo.jobNumber) {
          this.$message.warning("待审核人员通过后再进行批准操作！！！");
          return;
        }
      }
      let query = {
        sopId: this.form.id,
        remark: this.form.remark,
        result: this.form.result
      };
      let data = await sopHandle(query);
      if (data.code == "1") {
        this.getData();
      } else {
        this.$message.error(data.msg);
      }
    },
    view(row) {
      this.$router.push({
        path: "makeSOP",
        query: { sop: JSON.stringify(row) }
      });
    },
    getData() {
      this.listQuery.page = 1;
      this.listQuery.limit = 10;
      this.handleFilter();
    },
    async handleFilter() {
      this.loadingList = true;
      let query = { ...this.listQuery };
      let data = await sopQueryPage(query);
      if (data.code == "1") {
        this.total = data.data.total;
        this.tableInfo = data.data.records;
      } else {
        this.$message.error(data.msg);
      }
      this.loadingList = false;
    },
    handleSizeChange(val) {
      this.listQuery.limit = val;
      this.handleFilter();
    },
    handleCurrentChange(val) {
      this.listQuery.page = val;
      this.handleFilter();
    }
  },
  mounted() {
    this.handleFilter();
  }
};
</script>

<style>
/* 表格整体样式 */
.fixed-table {
  font-size: 14px;
  color: #333;
  border-radius: 6px;
  overflow: hidden;
}

/* 表头样式 */
.fixed-table .el-table__header-wrapper th {
  background-color: #f8f9fa !important;
  color: #444;
  font-weight: 600;
  border-bottom: 1px solid #ebeef5;
  text-align: center;
}

/* 行样式 */
.fixed-table .el-table__body td {
  padding: 8px 10px !important;
  line-height: 22px;
  border-bottom: 1px solid #ebeef5;
}

/* 单元格内容溢出省略 */
.fixed-table .el-table__body td .cell {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* hover 高亮行 */
.fixed-table .el-table__body tr:hover > td {
  background-color: #f0f9ff !important;
}

/* 当前选中行 */
.fixed-table .el-table__row.current-row > td {
  background-color: #e6f7ff !important;
}

/* 按钮间距 */
.fixed-table .el-button {
  margin: 2px 4px;
}
.operation-buttons {
  white-space: nowrap;
}

.operation-buttons .el-button {
  margin-right: 6px;
  min-width: 60px; /* 根据按钮文字长度调整 */
}
</style>
